<script setup>
import { useRouter} from 'vue-router'
import {useUserStore} from '../store/useUserStore.js'
import {ref} from 'vue'
import {config} from '../util/config.js'
import axios from 'axios'
import { ElMessage } from 'element-plus'
const particlesLoaded = () => {
}
const ruleFormRef=ref()
const ruleForm = ref({
    username: '',
    password: ''
})

const rules =ref({
    username: [
        { required: true, message: '请输入账号', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' }
    ]
})
const router=useRouter()
const {changeUser}=useUserStore()
// 登录校验
const submitForm=async (ruleFormRef)=>{
 await ruleFormRef.validate(async (isOk,fields)=>{
    if(isOk){
      // 校验成功
   const res=await axios.post('/adminapi/users/login',ruleForm.value)
      let {code,data}=res.data
      if(code===200){
       changeUser(data)
      //  提示消息
      ElMessage.success('登录成功')
       router.push('/')
      }else{
        ElMessage.error('用户名与密码不匹配')
      }
      // 判断是管理员还是教师
      // if(ruleForm.value.username==='admin'){
      //   handleLogin1()
      // }else{
      //   handleLogin2()
      // }
    }else{
      console.log('error submit!',fields)
    }
  })
}
// const handleLogin1=async ()=>{
//     // 设置管理员权限
//     // 用pinia存储用户信息 具有响应式

//     const res= await axios.get('/adminapi/roles')
//     changeUser({
//         'id': 1,
//         'username': 'admin',
//         'password': '123',
//         'role': {
//             'roleName': '管理员',
//             'roleType': 1,
//             'rights': res.data[0].rights
//         }
//     })

//     // 跳转到首页
//     router.push('/')
// }
// // const getList=async ()=>{
// //  const res= await axios.get('/adminapi/roles')
// //  console.log(res)
// // //  console.log(res.data[0].rights)
// //   tableData.value=res.data
// //   // console.log(tableData.value)
// // }
// const handleLogin2=async ()=>{
//     // 设置教师权限
//     const res= await axios.get('/adminapi/roles')
//   // console.log(res)
//     changeUser( {
//         'id': 2,
//         'username': '王老师',
//         'password': '123',
//         'role': {
//             'roleName': '教师',
//             'roleType': 2,
//             'rights': res.data[1].rights 
//         }
//     })

//     router.push('/')
// }
</script>

<template>
   <!-- <vue-particles id="tsparticles" @particles-loaded="particlesLoaded" url="http://foo.bar/particles.json" /> -->

<vue-particles
    id="tsparticles"
    @particles-loaded="particlesLoaded"
   :options="config"
/>
    <div class="formContainer">
      <h3>智慧实验室管理平台</h3>
      <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    status-icon
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
  >
    <el-form-item label="账号" prop="username">
      <el-input 
      v-model="ruleForm.username"
       type="text" 
        />
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input
        v-model="ruleForm.password"
        type="password"
      />
    </el-form-item>
  </el-form>
  <el-form-item>
    <el-button style="margin-left: 30%;width: 80px;margin-top: 20px;" color="#626aef" size="large"  @click="submitForm(ruleFormRef)" type="primary" >登录</el-button>
    <el-button  style="margin-left:60px;width: 80px;margin-top: 20px;"  size="large" type="danger" >忘记密码</el-button>
  </el-form-item>
      
    </div>
</template>

<style lang="scss" scoped>
  .formContainer{
    width: 500px;
    height: 300px;
    position: fixed;
    left: 50%;
    top: 50%;
   transform: translate(-50%,-50%);
   color: white;
   text-shadow: 2px 2px 5px black;
   text-align: center;
   z-index:100 ;
   h3{
    font-size: 40px;
    margin-bottom: 50px;
    color: pink;
    }
    :deep(.el-form-item__label){
      color: skyblue;
      font-size: 16px;
      font-weight: 700;
    }
  }
</style>